<template>
  <div class="sms_log_container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="发送记录" name="sendLogList">
        <SendLogList ref="sendLogListRef" />
      </el-tab-pane>
      <el-tab-pane label="发送量统计" name="sendCountList">
        <SendCountList ref="sendCountListRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import { TabsPaneContext } from 'element-plus'
  import SendCountList from './components/SendCountList.vue'
  import SendLogList from './components/SendLogList.vue'
  import { ref } from 'vue'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.note.noteLogList,
  })

  // 当前激活的标签
  const activeName = ref('sendLogList')

  // 发送量统计组件实例
  const sendCountListRef = ref<InstanceType<typeof SendCountList> | null>(null)

  // 发送记录组件实例
  const sendLogListRef = ref<InstanceType<typeof SendLogList> | null>(null)

  const handleClick = (tab: TabsPaneContext) => {
    switch (tab.paneName) {
      case 'sendCountList':
        if (sendCountListRef.value) {
          sendCountListRef.value.getList()
        }
        break
      case 'sendLogList':
        if (sendLogListRef.value) {
          sendLogListRef.value.getSendLogList()
        }
        break
    }
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
